<template>
  <view class="product-list">
    <view class="product-card" v-for="(product, index) in products" :key="index" @click="$emit('product-click', {id: index, name: product.name})">
      <view class="product-tag" :class="product.tagType">{{product.tag}}</view>
      <image class="product-image" :src="product.image" mode="aspectFill"></image>
      <text class="product-name">{{product.name}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductList',
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  emits: ['product-click']
};
</script>

<style scoped lang="scss">
@import "../../../static/common.scss";

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 0 30rpx 30rpx;
}

.product-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  position: relative;
}

.product-tag {
  position: absolute;
  top: 15rpx;
  left: 15rpx;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  color: white;
  z-index: 1;
}

.product-tag.hot {
  background-color: #ff4757;
}

.product-tag.activity {
  background-color: #ff6b35;
}

.product-image {
  width: 100%;
  height: 200rpx;
  border-radius: 15rpx;
  margin-bottom: 15rpx;
}

.product-name {
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
  @include text-ellipsis(2);
}
</style>